<template>
	<view>
		<view v-if="isFlag" class="search_box" @click="naviSearch" :style="{top:statusBar + 'px'}">
			<view class="search_center">
				<image src="../../static/images/icon-search.png" mode=""></image>
			</view>
			<view class='search_btn'>搜 索</view>
		</view>
		<view :class="isFlag?'video-header':'video-header top-center'" :style="{top:isFlag?customBar+ 'px': statusBar + 'px'}">
			<view class="icon cuIcon-search" @click="handleSearch" v-if="!single"></view>
			<view class="icon cuIcon-back" @click="handleBack" v-else></view>
			<view class="middle">
				<view @click="setIndex(index)" :class="actIndex == index ? index == 0 ? 'text act_text first_item':'text act_text': 'text'" v-for="(item,index) in list">{{item.cate_name}}</view>
			</view>
		</view>	
	</view>
</template>

<script>
	let timer = null,
		num = 0
	export default {
		data() {
			return {
				list:[				],
				customTop:0,
				customBar: 0,
				statusBar:0
			}
		},
		mounted(){
			uni.getSystemInfo({
			    success: e=> {
			      // this.compareVersion(e.SDKVersion, '2.5.0')
			      let statusBar = 0
			      let customBar = 0
			      
			      
			      // #ifdef MP
			      statusBar = e.statusBarHeight
			      customBar = e.statusBarHeight + 45
			      if (e.platform === 'android') {
			        this.$store.commit('SET_SYSTEM_IOSANDROID', false)
			        customBar = e.statusBarHeight + 50
			      }
			      // #endif
			      
			      
			      // #ifdef MP-WEIXIN
			      statusBar = e.statusBarHeight
			      // @ts-ignore
			      const custom = wx.getMenuButtonBoundingClientRect()
			      customBar = custom.bottom + custom.top - e.statusBarHeight
			      // #endif
			
			
			      // #ifdef MP-ALIPAY
			      statusBar = e.statusBarHeight
			      customBar = e.statusBarHeight + e.titleBarHeight
			      // #endif
			
			
			      // #ifdef APP-PLUS
			      console.log('app-plus', e)
			      statusBar = e.statusBarHeight
			      customBar = e.statusBarHeight + 45
			      // #endif
			
			
			      // #ifdef H5
			      statusBar = 0
			      customBar = e.statusBarHeight + 45
			      // #endif
				  
				console.log(statusBar)
				this.statusBar = statusBar
				this.customBar = customBar
				this.customTop = statusBar + customBar
				console.log(customBar)
				// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
			      // this.$store.commit('SET_STATUS_BAR', statusBar)
			      // this.$store.commit('SET_CUSTOM_BAR', customBar)
			      // this.$store.commit('SET_SYSTEM_INFO', e)
			    }
			})
			this.initData()

		},
		
		props: {
			single: {
				type: Boolean,
				default: false
			},
			actIndex:{
				default: 0
			},
			isMine: Boolean,
			isDynamic: Boolean,
			videoItem: Object,
			isFlag:Boolean,
		},
		methods: {
			initData(e){
				this.$http.shopcates({
					shop_id:1
				}).then(res=>{
					console.log(res)
					res.data.cateres.unshift({
						cate_name:'周边',
						id:0
					})
					this.list = res.data.cateres
				})
			},
			getClick(){
				console.log(1)
			},
			naviSearch(){
				uni.navigateTo({
					url: '../../pagesC/home/search/search'
				})
			},
			handleSearch() {
				getApp().globalData.isSearch = true
				uni.navigateTo({
					url: '../../pagesC/search/search'
				})
			},
			handleBack() {
				if (this.isMine) {
					uni.switchTab({
						url: '../../pages/mine/mine'
					})
				} else if(this.isDynamic) {
					uni.switchTab({
						url: '../../pages/dynamic/dynamic'
					})
				} else {
					uni.redirectTo({
						url: '../../pages/person/person?userId=' + this.videoItem.userId
					})
				}
				
			},
			setIndex(index){
				if(index != 0){
					if(this.actIndex != index){
						this.list[index].index = index
						this.$emit('setIndex',this.list[index])
					}
				}else{
					
					if(this.actIndex == 0){
						uni.navigateTo({
							url:'../../pagesC/home/selectArea/selectArea'
						})
					}else{
						this.list[index].index = index
						this.$emit('setIndex',this.list[index])
					}
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_box{
		position: fixed;
		width: 65vw;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		z-index: 9;
		left: 4vw;
		font-size: 30rpx;
		color: #fff;
		.search_center{
			width: 400rpx;
			height: 60rpx;
			background: rgba(255,255,255,0.5);
			border-radius: 10rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin: 14rpx 14rpx;
			}
		}
		.search_btn{
			font-size: 36rpx;
		}
	}
	.top-center{
		width: 70vw!important;
	}
	.video-header {
		height: 100rpx;
		line-height: 100rpx;
		width: 100%;
		position: fixed;
		top: 85rpx;
		left: 0;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0);
		z-index: 200;
	  /* position: fixed; */
	  color: #999999;
	  z-index: 9999;
	  /* top: 5vh; */
	  font-size: 36rpx;
	  /* left: 4vw; */

	}

	.icon {
		position: absolute;
		left: 0;
		top: 0;
		color: white;
		width: 20%;
		text-align: center;
		font-size: 45rpx;
	}

	.middle {
		text-align: center;
		color: white;
	    overflow-y: auto;
		display: flex;
		height: 80rpx;
	}

	.text {
		display: inline;
		margin: 0 10px;
		font-size: 34rpx;
	    flex-shrink: 0;
		line-height: 80rpx;

	}
	.act_text{
		position: relative;
		&::after{
			content: '';
			position: absolute;
			width: 80%;
			height: 4rpx;
			background-color: #ffffff;
			border-radius: 2rpx;
			left: 10%;
			bottom: 0rpx;
		}
	}
	.first_item{
		margin-right: 40rpx;
		&::before{
			position: absolute;
			content: '';
			right: -40rpx;
			top: 35rpx;
			width: 0px;                 /*  宽高设置为0，很重要，否则达不到效果 */
			height: 0px;
			border: 15rpx solid #ffffff;
			border-bottom-color: transparent;    /* 设置透明背景色 */
			border-left-color: transparent;
			border-right-color: transparent;
		}
	}
	::-webkit-scrollbar {display:none}
</style>
